<template>
    <el-dialog id="chooseCategoryDialog" title="选择分类" :visible.sync="openFlag" width="80%" append-to-body @close="closeDialog">
        <el-container>
            <el-aside width="200px" style="background-color: white;">
                <el-tree :load="loadNode" :props="defaultProps" lazy @node-click="handleNodeClick"
                    @current-change="handleCurrentChange" :highlight-current="true"></el-tree>
            </el-aside>
            <el-main>
                <el-table v-loading="loading" highlight-current-row :data="AssetCategoryList" @row-click="singleElection">
                    <el-table-column type="radio" width="55" align="center" >
                        <template slot-scope="scope">
                            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                            <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">
                                <span>&nbsp;</span>
                            </el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类编码" align="center" prop="number" />
                    <el-table-column label="分类名称" align="center" prop="name" />
                    <el-table-column label="父节点ID" align="center" prop="parentId" />
                    <el-table-column label="显示排序" align="center" prop="orderNo" />
                    <el-table-column label="备注" align="center" prop="remark" />
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sub">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
  
<script>


import { getTreeNodesByParentId } from "@/api/asset/assetCategory";
import { listAssetCategory } from "@/api/asset/assetCategory";

export default {
    name: "ChooseAssetCategory",
    mounted() {
        this.getList();
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            openFlag: false,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                number: null,
                name: null,
                parentId: null,
                orderNo: null,
            },
            currentNode: null,
            currentRow: null,
            templateSelection: null,
            // 资产分类表表格数据
            AssetCategoryList: [],
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },
    created() {

    },
    methods: {
        open() {
            this.openFlag = true;
        },
        closeDialog() {
            this.$emit('close');
        },
        /** 查询资产分类表列表 */
        loadNode(node, resolve) {
            const data = node.data;
            let parentId = 0;
            if (data) {
                parentId = data.id;
            }

            getTreeNodesByParentId(parentId).then(response => {
                this.resetCurrentRow();
                resolve(response);
            });
        },
        handleNodeClick(node) {

        },
        handleCurrentChange(data, node) {
            this.currentNode = data;
            this.resetCurrentRow();
        },
        resetCurrentRow() {
            this.currentRow = null;
            this.templateSelection = null;
        },
        /** 查询资产分类表列表 */
        getList() {
            this.loading = true;
            const { pageNum, pageSize } = this.queryParams;

            if (this.currentNode) {
                this.queryParams.parentId = this.currentNode.id;
                this.queryParams.parentNumber = this.currentNode.number;
            }


            const query = { ...this.queryParams, pageNum, pageSize };
            const pageReq = { page: pageNum - 1, size: pageSize };
            listAssetCategory(query, pageReq).then(response => {
                const { content, totalElements } = response
                this.AssetCategoryList = content;
                this.total = totalElements;
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                console.log(error);
            });
        },
        singleElection(row) {
            this.templateSelection = row.id;
            this.currentRow = row;
        },
        cancel() {
            this.openFlag = false;
        },
        sub() {
            if (!this.currentRow) {
                this.$message.error("请选择资产分类");
                return;
            }
            this.$emit('sub', this.currentRow);
            this.openFlag = false;
        }
    },
    watch: {
        currentNode: function(val) {
            this.getList();
        }
    }
};
</script>
  